<template>
    <div class="gas">
        <div class="supply">
            <text class="textGas">请选择供气企业</text>
            <div class="sureBtn">
                <text class="sure">确定</text>
            </div>
        </div>
        <list
        ref="scroller"
        class="listCont">
            <cell class="listContItem" v-for="(item, index) in datalist" :key="index" @click="polling(index)" :class="[index === activeIndex ? 'active' : '']">
                <text class="text" ref="items" :class="[index === activeIndex ? 'active' : '']">{{item}}</text>
            </cell>
        </list>
    </div>
</template>
<script>
export default {
    name: 'gasSupply',
    data(){
        return {
            datalist: ['北京燃气'],
            activeIndex: null
        }
    },
    beforeCreate() {
        this.$notice.loading.show()
        this.$navigator.setLeftItem({
            text: '   ',
            fontSize: '40',
            fontWeight: 'bold'
        }, () => {
            this.$router.back()
        })
    },
    mounted () {
        this.$notice.loading.hide()
    },
    methods: { 
        polling(index){
            this.activeIndex = index;
            this.data = this.$refs.items[index].attr.value;
            this.$router.getParams().then(res => {
                this.$router.setBackParams({
                    value: this.data,
                    name: res.name
                })
            })
            this.$router.back();
        }
    }
}
</script>
<style scoped>
.supply{
    width: 750px;
    height: 100xp;
    background-color: rgba(238,238,238,1);
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding-left: 15px;
    padding-right: 15px;
}
.textGas{
    font-size: 29.1px;
    font-family:PingFangSC-Regular;
    color: rgba(62,175,252,1);
}
.text{
    font-size: 29.1px;
    font-family:PingFangSC-Regular;
    color:rgba(102,102,102,1);
}
.sureBtn{
    width: 100px;
    height: 50px;
    background-color: rgba(62,175,252,1);
    border-radius: 8px;
    justify-content: center;
    align-items: center;
}
.sure{
    color: #fff;
    font-family:PingFangSC-Regular;
    font-size: 25px;
}
.listCont{
    width: 750px;
}
.listContItem{
    width: 750px;
    height: 100px;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    border-bottom-color: #ccc;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    padding-left: 15px;
}
.text{
    font-size: 29.1px;
    font-family:PingFangSC-Regular;
    color:rgba(102,102,102,1);
}
.active{
    background-color: rgba(62,175,252,1);
    color: #fff;
}
</style>
